<template>
  <div class="box">
    <!-- 菜单页面内容 -->

    <div class="box_top">
      <!-- 头部 -->
      <div class="box_top_head">
        <van-nav-bar title="地址列表" left-text="返回" left-arrow @click-left="onClickLeft" />
      </div>
      <!-- 我的页面内容 -->
      <div class="box_top_content">
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          :disabled-list="disabledList"
          disabled-text="以下地址超出配送范围"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      chosenAddressId: "1",
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "2",
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号"
        }
      ],
      disabledList: [
        {
          id: "3",
          name: "王五",
          tel: "1320000000",
          address: "浙江省杭州市滨江区江南大道 15 号"
        }
      ]
    };
  },
  // 注册组件
  components: {},
  methods: {
    onAdd() {
      Toast("新增地址");
    },
    onEdit(item, index) {
      this.$router.push({ path:'/addressdetail'  })
      Toast("编辑地址:" + index);
    },
    //    回到上一个页面
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    }
  }
};
</script>
<style scoped lang="less">
.box {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  .box_top {
    background-color: #f7f8fa;
    height: 100vh; //底部加1px的边框
    overflow: auto;
    border-bottom: 1px solid #f3f3f3;
    .box_top_head {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      height: 46px;
      background-color: #fff;
      z-index: 10;
    }
    .box_top_content {
      margin-top: 46px;
    }
  }
}
</style>
